<template>
	<view class="add-app-white-search-page">
		<view  class="custom-van-cel-group-sytle top-title">
			<view class="group-item">
				<view class="custom-title">
					安全区域出入记录
				</view>
				<view class="custom-icon">
					<image src="/static/icon/location.png"  style="width: 12px;height: 14px;"></image>
				</view>
			</view>
			<view>
				<image src="/static/icon/arrow-right.png" @click="jumPage" style="width: 20px;height: 20px;margin-right: 10px; display: none;"></image>
			</view>
		</view>
		<view class="sec-card-list">
			<view class="custom-van-cel-group-sytle" v-if="list.length > 0" v-for="(sec,index) in list" :key="sec.id">
				<view class="list-item">
					<view class="custom-title">
						<view class="custom-title-left">
							<view class="custom-icon">
								<image src="/static/icon/location.png"  style="width: 18px;height: 20px;"></image>
							</view>
							<view class="sec-scope">安全区域</view>
						</view>
						<image src="/static/icon/arrow-right.png" @click="toPage" style="width: 20px;height: 20px; display: none;"></image>
					</view>
					<view  class="custom-label-style">
						<view class="base-sec-group">
							<view class="location base-sec">
								<image src="/static/icon/sec_location.png"  style="width: 20px;height: 20px;"></image>
								<view class="base-txt">{{ sec.address }}</view>
							</view>
							<view class="base-sec">
								<image src="/static/icon/clock.png"  style="width: 20px;height: 20px;"></image>
								<view class="base-txt">预警时间: 全天</view>
							</view>
						</view>
						<view class="base-sec-group">
							<view class="base-sec">
								<image src="/static/icon/sec_eye.png"  style="width: 20px;height: 20px;"></image>
								<view class="base-txt">范围{{sec.warnDistance}}米</view>
							</view>
							<view class="base-sec">
								<image src="/static/icon/flowe.png"  style="width: 20px;height: 20px;"></image>
								<view class="base-txt">{{ sec.status === "ON" ? "守护中" : "停止守护"}}</view>
							</view>
						</view>
						<view class="btns-action">
							<view class="base-sec-btn stop-sec"  @click="() => stop(sec)">停止维护</view>
							<view class="base-sec-btn delete-sec" @click="() => dele(sec)">删除</view>
						</view>
					</view>
					
				</view>
			</view>
			<view v-else class="is-empt">
				<Empt description="暂无活动范围出入记录" />
			</view>
			
			<view class="add-sec-scope">
				<view class="add-sec-btn"  @click="addSecScope">添加安全区域</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, computed, onMounted } from 'vue'
	import { homeServer } from '@/common/index'
	import { useStudentListStore } from "@/stores/useStudentList.js"
	import { onLoad, onShow } from "@dcloudio/uni-app"
	// import { urlHelp } from '@/utils/index'
	import { useBound } from "@/hooks/useBound.ts"
	import Empt from "@/components/Empt/index.vue"
	
	
	const {tipBoundStudent, studentIsEmpt} = useBound();
	const studentStore = useStudentListStore();
	const curStd = computed(() => studentStore.currentStudent);
	const page = ref(1);
	const size = ref(10);
	const list = ref([])
	
	const addSecScopePageUrl = ref(); // 跳转到 添加安全区域
	onLoad(({late,lote}) => {
		addSecScopePageUrl.value = `/pagesC/addSecScope/index?late=${late}&lote=${lote}`
	})
 
	function calculateTimeDifference(startTime, endTime) {  
		function isValidTime(time) {
		    // 使用正则表达式验证时间格式是否为 HH:MM  
		    const regex = /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/;  
		    return regex.test(time);  
		} 
	    if (!isValidTime(startTime) || !isValidTime(endTime)) {  
	        return "-";  
	    }  
	  
	    // 将时间字符串转换为分钟  
	    const startMinutes = parseInt(startTime.split(':')[0]) * 60 + parseInt(startTime.split(':')[1]);  
	    const endMinutes = parseInt(endTime.split(':')[0]) * 60 + parseInt(endTime.split(':')[1]);  
	  
	    // 计算时间差（分钟）  
	    const differenceInMinutes = endMinutes - startMinutes;  
	  
	    // 将时间差转换为小时和分钟  
	    const hours = Math.floor(differenceInMinutes / 60);  
	    const minutes = differenceInMinutes % 60;  
	  
	    // 格式化输出  
	    return `${hours.toString().padStart(2, '0')}小时${minutes.toString().padStart(2, '0')}分`;  
	}  
	
	
	// 获取应用
	const traceScopesRecord = async () => {
		const studentId = curStd.value?.id;
		if (studentId) {
			try {
				const params = {
					studentId,
					page: page.value,
					size: size.value
				};
				const { status, data } = await homeServer.traceScopesScope(params)
				console.log('获取数据', status, data)
				if (status === '200') {
					// list.value = data?.map(item => urlHelp.imgAddPrefix(item, 'image'));
					list.value = data;
				}
			} catch (e) {
				console.log(e)
				//TODO handle the exception
			}
		} else {
			if(studentIsEmpt.value){
				tipBoundStudent();
				return;
			}
		}
	}
	
	onMounted(() => {
		traceScopesRecord()
	})

	onShow(() => {
		traceScopesRecord()
	})
	
	
	// 停止，或者开启守护
	const traceScopesUpdate = async (id, status) =>{
		try{
			const { status, data} = await homeServer.traceScopesUpdate({id, status});
			if(status === '200'){
				uni.showToast({
					title:"修改成功",
					success() {
						traceScopesRecord()
					}
				})
			}
		}catch(e){
			console.log(e)
			//TODO handle the exception
		}
	}
	
	// 删除
	const traceScopesDelete = async (id) => {
		try{
			const { status, data} = await homeServer.traceScopesDelete({id});
			if(status === '200'){
				uni.showToast({
					title:"删除成功",
					success() {
						traceScopesRecord()
					}
				})
			}
		}catch(e){
			console.log(e)
			//TODO handle the exception
		}
	}
	
	const stop  = (sec) => {
		uni.showModal({
			content:"您确认停止维护吗",
			success({confirm}) {
				if(confirm){
					traceScopesUpdate(sec.id, sec.status === 'ON' ? 'OFF' : 'ON')
					console.log('停止维护')
				}
			}
		})
	}
	const dele = (sec) => {
		uni.showModal({
			content:"您确认要删除吗？",
			success({confirm}) {
				if(confirm){
					console.log('删除')
					traceScopesDelete(sec.id)
				}
			}
		})
	}
	
	const addSecScope = () => {
		if(studentIsEmpt.value){
			tipBoundStudent();
			return;
		}
		if(addSecScopePageUrl.value){
			uni.navigateTo({
				url: addSecScopePageUrl.value
			})
		} 
	}
	
	const jumPage = () => {
		//todo 暂时去掉了这个功能 
		return;
		if(studentIsEmpt.value){
			tipBoundStudent();
			return;
		}
		uni.navigateTo({
			url:"/pagesC/secRecord/index"
		})
	}
	
	const toPage = () => {
		// if(studentIsEmpt.value){
		// 	tipBoundStudent();
		// 	return;
		// }
		// uni.navigateTo({
		// 	url:"/pagesC/secScope/index"
		// })
	}
</script>


<style lang="scss">
	page {
		background-color: #f5f9fa;
	}

	.add-app-white-search-page {
		.list {
			.title {
				margin-left: 40upx;
				color: #000;
			}

			.right-icon {
				width: 100upx;
				height: 50upx;
				line-height: 50upx;
				text-align: center;
				font-size: 26upx;
				background-color: #2bc888;
				color: #fff;
				border-radius: 30upx;
			}
		}
	}
</style>

<style lang="scss">
	.custom-van-cel-group-sytle {
		.van-cell-group {
			margin: 0;
		}
		.list-item{
			border-bottom: 1px solid #e8e8e8;
			margin-top: 40upx;
			padding-bottom: 40upx;
		}
	}
</style>

<style scoped lang="scss">
	.add-app-white-search-page {
		.list {
			background-color: #fff;
			margin-top: 40upx;
		}

		.custom-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.custom-title-left{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			
			// &::after {
			// 	display: inline-block;
			// 	content: "";
			// 	width: 12upx;
			// 	height: 12upx;
			// 	background-color: #f00;
			// 	border-radius: 50%;
			// 	overflow: hidden;
			// 	margin-left: 5upx;
			// 	display: none;
			// }
		}

		.custom-icon {
			margin-right: 10upx;
		}

		.sec-card-list {
			background-color: #fff;
			margin-top: 40upx;
			border-radius: 16upx;
			padding: 20upx;
		}


		.custom-label-style {
			padding-left: 20upx;
			.base-sec-group {
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				flex-direction: column;
				margin-bottom: 10upx;

				.base-sec {
					display: flex;
					justify-content: flex-start;
					width: 100%;
					align-items: flex-start;
					font-size: 28upx;
					margin-bottom: 10upx;

					image {
						flex-shrink: 0;
					}

					.base-txt {
						margin-left: 10upx;
						margin-bottom: 10upx;
						color: #777;
						word-break: break-all;
						flex: 1;
					}
				}
			}
			.btns-action{
				margin-top: 20upx;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				.base-sec-btn{
					color:#ff0000;
					border:1px solid #ff0000;
					padding: 10upx 20upx;
					border-radius: 32upx;
					font-size: 28upx;
				}
				.stop-sec{}
				.delete-sec{}
			}
		}
		
		.add-sec-scope{
			width: 100%;
			position: fixed;
			bottom: 80upx;
			margin: 0 auto;
			display: flex;
			justify-content: center;
			.add-sec-btn{
				background-color: #2BC888;
				color: #fff;
				padding: 22upx 30upx;
				border-radius:50upx;
				font-size: 28upx;
				text-align: center;
			}
		}
	}
	
	
	.top-title{
		display: flex;
		justify-content: space-between;
		align-items: normal;
		padding: 20upx 0;
		background-color: #fff;
		.group-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: 20upx;
			.custom-title{
				font-size: 30upx;
				margin-right: 20upx;
			}
		}
	}
	
	
	.is-empt{
		display: flex;
		font-size: 28upx;
		justify-content: center;
		color: #ccc;
	}
	.sec-scope{
		font-size: 32upx;
		margin: 20upx 0;
	}
</style>